<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Event Test</title>
</head>
<body>
<script src="../test/test.js"></script>
<script>
    KISSY.Test.Config.times = 1;
</script>

<h2>Test Data</h2>

<script src="../../build/kissy/kissy-pkg.js"></script>
<script src="../../build/ua/ua-pkg.js"></script>
<script src="../../build/dom/dom-pkg.js"></script>

<script src="event.js"></script>
<script src="event-object.js"></script>
<script src="event-target.js"></script>
<script src="event-mouseenter.js"></script>
<script src="event-focusin.js"></script>

<script src="../../third-party/jquery/jquery-1.4.2.js"></script>
<script src="../../third-party/yui2/yahoo-dom-event/yahoo-dom-event.js"></script>

<div id="foo">
    <ul id="bar">
        <li><a id="link-a" href="#">link a</a></li>
        <li><a id="link-b" href="../">link b</a></li>
        <li id="li-c"><a id="link-c1" href="#">link c1</a> | <a id="link-c2" href="#">link c2</a></li>
        <li id="li-d"><a id="link-d1" href="#">link d1</a> | <a id="link-d2" href="#">link d2</a></li>
        <li id="li-e"><a id="link-e1" href="#">link e1</a> | <a id="link-e2" href="#">link e2</a></li>
        <li><a id="link-f" href="#">link f</a></li>
        <li><a id="link-g" href="#">link g</a></li>
        <li><a id="link-h" href="#">link h</a></li>
        <li><a id="link-s" href="#">link s</a></li>
    </ul>
</div>
<div id="test-focusin">
    test focusin:  <input type="text" value="点击我"/>
</div>
<div style="margin-top: 10px; padding: 30px; background-color: #e3e4e5">
    <div id="outer" style="padding: 20px; background-color: #D6EDFC">
        <p class="info">move your mouse</p>
        <div id="inner" style="padding: 20px; background-color: #FFCC00">
            <p class="info">move your mouse</p>
            <p class="num">0</p>
        </div>
        <p class="num">0</p>
    </div>
</div>

<!-- Test Cases -->
<script>
    var S = KISSY, DOM = S.DOM, Event = S.Event,
        foo = S.get('#foo'),
        foo2 = S.get('#foo2'),
        bar = S.get('#bar'),
        bar2 = S.get('#bar2'),
        outer = S.get('#outer'),
        inner = S.get('#inner'),
        a = S.get('#link-a'),
        b = S.get('#link-b'),
        c1 = S.get('#link-c1'),
        c2 = S.get('#link-c2'),
        li_c = S.get('#li-c'),
        li_d = S.get('#li-d'),
        li_e = S.get('#li-e'),
        d1 = S.get('#link-d1'),
        d2 = S.get('#link-d2'),
        e1 = S.get('#link-e1'),
        e2 = S.get('#link-e2'),
        f = S.get('#link-f'),
        g = S.get('#link-g'),
        h = S.get('#link-h');

    function test_add_listenersOrder(test) {
        Event.on(a, 'click', function() { test.echo(1); });
        Event.on(a, 'click', function() { test.echo(2); });
        test.extraMsg = '{click link a should echo 1 -> 2}';
    }

    function test_add_preventDefault(test) {
        Event.add(b, 'click', function(ev) { ev.preventDefault(); });
        test.extraMsg = '{click link b: nothing happen}';
    }

    function test_add_stopPropagation(test) {
        Event.add(c2, 'click', function(ev) { ev.stopPropagation(); });
        Event.add(li_c, 'click', function() { test.echo('li-c'); });
        test.extraMsg = '{click link c1 should echo li-c; click link c2: nothing happen}';
    }

    function test_add_stopImmediatePropagation(test) {
        Event.add(d1, 'click', function() { test.echo(1); });
        Event.add(d1, 'click', function() { test.echo(2); });

        Event.add(d2, 'click', function() { test.echo(1); });
        Event.add(d2, 'click', function(ev) { ev.stopImmediatePropagation(); });
        Event.add(d2, 'click', function() { test.echo(2); });

        Event.add(li_d, 'click', function() { test.echo('li-d'); });
        test.extraMsg = '{click link d1 should echo 1 -> 2 -> li-d; click link d2 should echo 1}';
    }

    function test_add_returnFalse(test) {
        Event.add(e1, 'click', function() { test.echo(1); });
        Event.add(e1, 'click', function() { test.echo(2); });

        Event.add(e2, 'click', function() { test.echo(1); return false; });
        Event.add(e2, 'click', function() { test.echo(2); });
        Event.add(li_e, 'click', function() { test.echo('li-e'); });

        //$(e2).click(function() { test.echo(1); return false; });
        //$(e2).click(function() { test.echo(2); });
        //$(li_e).click(function() { test.echo('li-e'); });

        //e2.onclick = function() { return false; };
        //e2.addEventListener('click', function() { test.echo(1); return false; }, false);
        //e2.addEventListener('click', function() { test.echo(2); }, false);
        //li_e.addEventListener('click', function() { test.echo('li-e'); }, false);

        test.extraMsg = '{click link e1 should echo 1 -> 2 -> li-e; click link e2 should echo 1 -> 2 -> li-e}';
    }

    function test_remove_fn(test) {
        function t() { test.echo('t'); }

        Event.add(f, 'click', t);
        Event.add(f, 'click', t);
        Event.remove(f, 'click', t);
//        $(f).click(t);
//        $(f).click(t);
//        $(f).unbind('click', t);

        test.extraMsg = '{click link f: nothing happen}';
    }

    function test_remove_type(test) {
        Event.add(f, 'click', function() { test.echo(1); });
        Event.add(f, 'click', function() { test.echo(2); });
        Event.remove(f, 'click');

        test.extraMsg = '{click link g: nothing happen}';
    }

    function test_remove_el(test) {
        Event.add(h, 'click', function() { test.echo(1); });
        Event.add(h, 'click', function() { test.echo(2); });
        Event.remove(h);

        test.extraMsg = '{click link h: nothing happen}';
    }

    function test_mouseenter() {
        var n1 = 0,
            info1 = S.get('#outer .info'),
            num1 = S.query('#outer .num')[1];

        Event.add(outer, 'mouseenter', function(ev) {
            DOM.text(info1, ev.type);
            DOM.text(num1, ++n1);
        });

        Event.add(outer, 'mouseleave', function(ev) {
            DOM.text(info1, ev.type);
            DOM.text(num1, ++n1);
        });

        var n2 = 0,
            info2 = S.get('#inner .info'),
            num2 = S.get('#inner .num');

        Event.add(inner, 'mouseenter', function(ev) {
            DOM.text(info2, ev.type);
            DOM.text(num2, ++n2);
        });

        Event.add(inner, 'mouseleave', function(ev) {
            DOM.text(info2, ev.type);
            DOM.text(num2, ++n2);
        });
    }

    function test_EventTarget(test) {
        function Dog(name) {
            this.name = name;
        }
        S.augment(Dog, S.EventTarget);
        S.augment(Dog, {
           run: function() {
               this.fire('running', {speed: '80 km/h'});
           }
        });

        var dog = new Dog('Lady Gogo');
        dog.on('running', function(ev) {
           test.echo(this.name + ' is running now. Its speed is ' + ev.speed + '.');
        });
        dog.on('running', function() {
           test.echo('running fired 2.');
            return false;
        });
        dog.on('running', function() {
           test.echo('running fired 3.');
        });

        dog.run();
    }

    function test_add_scope(test) {
        Event.add('#link-s', 'click', function(ev) {
            ev.preventDefault();
            test.echo(this.p);
        }, { p: 'scope test' });
        test.extraMsg = '{click link s should echo "scope test"}';
    }

//    function test_add_beforeunload() {
//
//        YAHOO.util.Event.on(window, 'beforeunload', function(ev) {
//           alert('yui2 beforeunload');
//        });
//
//        Event.add(window, 'beforeunload', function(ev) {
//           alert('kissy beforeunload');
//        });
//
//    }

    function test_add_focusin(test) {
        Event.add('#test-focusin', 'focusin focusout', function(ev) {
            test.echo('#test-focusin capture ' + ev.type + ' event');
        });

        $('#test-focusin').focusin(function(ev) {
            test.echo('#test-focusin capture ' + ev.type + ' event [jQuery]');
        });

        Event.add('#test-focusin input', 'focusin focusout', function(ev) {
            test.echo('#test-focusin input capture ' + ev.type + ' event');
        });

        Event.add('#test-focusin input', 'focus blur', function(ev) {
            test.echo('#test-focusin input capture ' + ev.type + ' event');
        });
    }

    function test_add_exception(test) {
        try {
            Event.add();
            Event.add(null);
            Event.add(document, null);
            Event.add(document, 'click', null);
        }
        catch(ex) {
            test.fail(ex);
        }
    }

    function test_scope(test) {
        Event.on(document, 'click', handle, {id: 1});
        Event.on(document, 'click', handle, {id: 2});

        var r = [];
        function handle() {
            r.push(this.id);
            if(r.length === 2) go();
        }

        function go() {
            if(r[0] === r[1]) test.echo('**** test_scope is failed.');
        }
    }

    Event.on(window, 'blur', function() {

    });

</script>

</body>
</html>